<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="/plain-draggable.js"></script>
  <style>
    body {
      margin: 0;
      border-width: 0;
      padding: 0;
    }

    div {
      font-size: 20px;
      line-height: 1;
    }
  </style>
</head>
<body>
  <div style="width: 300px; height: 30px;">
    <div id="elm1">elm1</div>
  </div>
  <div style="width: 300px; height: 30px;">
    <div id="elm2" style="border: 1px solid red; padding: 2px;">elm2</div>
  </div>
  <div style="width: 300px; height: 30px;">
    <div id="elm3" style="border: 1px solid red; padding: 2px; box-sizing: border-box;">elm3</div>
  </div>
  <div style="width: 300px; height: 30px;">
    <div id="elm7">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div></div>
  </div>

  <div style="height: 50px;">
    <div id="elm4" style="width: 300px; height: 30px;">elm4</div>
  </div>
  <div style="height: 50px;">
    <div id="elm5" style="width: 300px; height: 30px; border: 1px solid red; padding: 2px;">elm5</div>
  </div>
  <div style="height: 50px;">
    <div id="elm6" style="width: 300px; height: 30px; border: 1px solid red; padding: 2px; box-sizing: border-box;">elm6</div>
  </div>

  <div style="height: 50px; position: relative;">
    <div id="elm8" style="width: 300px; height: 30px;">elm8</div>
  </div>

  <!-- `margin` of target moves the parent element, and that margin is removed. It can't get the moving. -->
  <!-- So, this parent is not moved by border. -->
  <div style="box-sizing: border-box; height: 50px; position: relative; border: 1px solid red;">
    <div id="elm9" style="width: 300px; height: 30px; margin: 21px;">elm9</div>
  </div>

  <div style="height: 50px; position: relative; padding: 22px;">
    <div id="elm10" style="width: 300px; height: 30px;">elm10</div>
  </div>

  <iframe id="iframe" src="common.html"></iframe>

</body>
</html>
